<template>
  <div>
    <div v-if="shops.length">
      <van-card  v-for="(item,index) in shops" :key="index"
        :thumb="baseImgUrl + item.image_path"
      @click="$router.push('/shop')">
        <template #title>
          <div class="van_title">
            <span>品牌</span>
            <i class="van_title_i">{{item.name}}</i>
            <i class="van_title_i_two" v-for="(ele,index) in item.supports" :key="index">
              {{ele.icon_name}}
            </i>
          </div>
        </template>
        <template #tags>
          <div class="van_template">
            <van-rate
              v-model="item.rating"
              gutter="0px"
              allow-half
              void-icon="star"
              color="#ffd21e"
              void-color="#eee"
              :size="14"
              readonly
            />
            <i class="i_one">{{ item.rating }}&nbsp;</i>
            <i class="i_two">月售{{ item.recent_order_num }}单&nbsp;&nbsp;&nbsp;</i>
            <div class="van-rate-right">
              <!-- <van-tag type="primary">{{item.delivery_mode.text}}</van-tag> -->
              <van-tag type="primary">明明专送</van-tag>
              <van-tag plain type="primary">准时达</van-tag>
            </div>
          </div>
        </template>
        <template #price>
          <div class="van_price">
            <span>￥{{item.float_minimum_order_amount}}起送 / {{item.piecewise_agent_fee.tips}}</span>
            <span class="i_two">{{item.distance}} / {{item.order_lead_time}}</span>
          </div>
        </template>
      </van-card>
    </div>
    <ul v-else>
      <li v-for="(item,index) in 6" :key="index">
        <img src="./images/shop_back.svg" alt="back">
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      baseImgUrl: 'https://raw.githubusercontent.com/W-Qing/Vue-MintShop/master/mintshop-client/src/components/ShopList/images/',
      shop_score: 4.5,
      month_val: 500
    }
  },
  computed: {
    ...mapState(['shops'])
  }
}
</script>

<style lang="less" scoped>
.van_title {
  display: flex;
  justify-content: space-between;
  span {
    text-align: center;
    padding-top: 2px;
    width: 40px;
    margin-right: 5px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 14px;
    background-color: #ffd21e !important;
  }
  .van_title_i {
    flex: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 700;
    margin-right: 20px;
  }
  .van_title_i_two {
    width: 30px;
    top: 8px;
    font-size: 14px;
    color: #aaa;
    text-align: right;
    margin-left: 0;
  }
}

.van_template {
  // vertical-align: text-bottom;
  position: relative;
  margin-top: 15px;
}
.van-rate-right {
  position: absolute;
  right: 0;
  top: 2px;
}
.i_one {
  font-size: 18px;
  color: #ffd21e;
}
.i_two {
  color: #aaa;
}
.van_price {
  color: #aaa;
  .i_two {
    position: absolute;
    right: 0;
  }
}
</style>
